<template>
  <el-row type="flex" :gutter="5">
    <el-col v-if="!allocateProvince || notArea" :span="span">
      <el-select
        class="eve-common-select"
        v-model="province"
        :disabled="disabled"
        :size="size"
        filterable
        clearable
        transfer
        @change="handleOnChange('city')"
      >
        <el-option
          v-for="(item, index) in xzqhCode['province']"
          :key="`province_${index}`"
          :label="item.codeName"
          :value="item.codeValue"
        />
      </el-select>
    </el-col>
    <el-col v-if="!notArea" :span="span">
      <el-select
        class="eve-common-select"
        v-model="city"
        :disabled="disabled"
        :size="size"
        filterable
        clearable
        transfer
        @change="handleOnChange('area')"
      >
        <el-option
          v-for="(item, index) in cities"
          :key="`city_${index}`"
          :label="item.codeName"
          :value="item.codeValue"
        />
      </el-select>
    </el-col>
    <el-col v-if="!notArea" :span="span">
      <el-select
        class="eve-common-select"
        v-model="area"
        :disabled="disabled"
        :size="size"
        filterable
        clearable
        transfer
      >
        <el-option
          v-for="(item, index) in areas"
          :key="`area_${index}`"
          :label="item.codeName"
          :value="item.codeValue"
        />
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
import areaCode from './area.js'

export default {
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    // 显示层级，依据数组长度判断隐藏哪几个层级，数组内容存储的是被隐藏的层级选定值，比如: ['福建省', '福州市'] 会隐藏前两个层级，目前只支持指定省份
    displayLevel: {
      type: Array,
      default: () => []
    },
    // 不显示县级
    notArea: {
      type: Boolean,
      default: false
    },
    // 省
    provinceField: {
      type: String,
      default: ''
    },
    // 市
    cityField: {
      type: String,
      default: ''
    },
    // 县
    areaField: {
      type: String,
      default: ''
    },
    // 如果分配了省份就隐藏省份选择下拉框
    allocateProvince: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      province: null,
      city: null,
      area: null,
      theCities: [],
      theAreas: [],
      init: false,
      xzqhCode: {},
      isCreate: true
    }
  },
  computed: {
    cities () {
      return this.province ? this.xzqhCode[this.province] : []
    },
    areas () {
      return this.city ? this.xzqhCode[this.city] : []
    },
    span () {
      if (this.notArea) {
        return 24
      }
      const x = this.displayLevel.length >= 2 ? 2 : this.displayLevel.length
      return 24 / (3 - x)
    }
  },
  watch: {
    value () {
      this.parseValue()
    },
    provinceField () {
      this.province = this.provinceField
    },
    cityField () {
      this.city = this.cityField
    },
    areaField () {
      this.area = this.areaField
    },
    province () {
      if (this.province) {
        // 省
        this.$emit('input', [this.province])
      } else {
        this.$emit('input', [])
      }
      this.$emit('update:provinceField', this.province || '')
    },
    city () {
      if (this.city) {
        if (!this.areas || this.areas.length === 0) {
          // 省市
          const rs = [this.province]
          if (this.city) {
            rs.push(this.city)
            rs.push('')
          }
          this.$emit('input', rs)
        } else {
          this.$emit('input', [this.province, this.city])
        }
      } else {
        if (this.province) {
          this.$emit('input', [this.province])
        }
      }
      this.$emit('update:cityField', this.city || '')
    },
    area () {
      if (this.area) {
        // 省市县
        this.$emit('input', [this.province, this.city, this.area])
      } else {
        if (!this.areas || this.areas.length === 0) {
          const rs = [this.province]
          if (this.city) {
            rs.push(this.city)
            rs.push('')
          }
          this.$emit('input', rs)
        } else {
          if (this.province && this.city) {
            this.$emit('input', [this.province, this.city])
          }
        }
      }
      this.$emit('update:areaField', this.area || '')
    },
    displayLevel () {
      this.setDisplayLevel()
    }
  },
  mounted () {
    this.setDisplayLevel()
  },
  created () {
    this.xzqhCode = areaCode
    this.setDisplayLevel()
    this.parseValue()
    // if (!this.province) {
    //   this.province = this.provinceField
    // }
    // this.city = this.cityField
    // this.area = this.areaField
  },
  methods: {
    setDisplayLevel () {
      if (!this.allocateProvince) return
      if (!this.displayLevel || this.displayLevel.length === 0) {
        this.province = null
        this.city = null
        this.area = null
        return
      }
      if (this.displayLevel.length > 0) {
        this.province = this.displayLevel[0]
      }
      if (this.displayLevel.length > 1) {
        this.province = this.displayLevel[1]
      }
    },
    handleOnChange (objToSetNull) {
      if (objToSetNull === 'city') {
        this.city = null
        this.area = null
      } else {
        this.area = null
      }
    },
    parseValue () {
      if (this.value && this.value.length > 0) {
        this.province = this.value[0]
        this.parseCity()
      } else {
        this.province = null
        this.city = null
        this.area = null
      }
    },
    parseCity () {
      if (this.value && this.value.length > 1) {
        this.city = this.value[1]
        this.parseArea()
      }
    },
    parseArea () {
      if (this.value && this.value.length > 2) {
        this.area = this.value[2]
      }
    }
  }
}
</script>
